<template>
  <div class="about">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 购物车 -->
        <div class="icon_item_box">
          <div class="iconfont icon-paixu1" @click="sort_item">
            <span>排序</span>
          </div>
          <div class="iconfont icon-gouwuche" @click="goshopping">
            <span>
              购物车
              <span>(</span>
              <span class="icon_min">{{cartListtems.length}}</span>
              <span>)</span>
            </span>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 左边内容 -->
        <el-aside width="24%">
          <!-- 价格排序 -->
          <el-col :span="24">
            <el-menu
              class="el-menu-vertical-demo"
              default-active="index"
              v-for="(item,index) in srotLsit"
              :key="index"
            >
              <el-menu-item index="index" @click="sortpaixu(index)">
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <!-- 右边内容 -->
        <el-main>
          <el-row :gutter="10">
            <el-col :xs="24" :sm="8" :md="6" v-for="(item,index) in shanxuanList" :key="index">
              <div class="about_item">
                <div class="about_item_img">
                  <img :src="item.productImage" style="border-radius: 10%;" />
                </div>
                <div class="about_item_content">
                  <p class="cartList_box_title">{{item.productName}}</p>
                  <p>￥{{item.salePrice}}</p>
                  <div class="gotoshop" @click="gotoCart(item)">加入购物车</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <div class="footer_loading" v-vanish="ISshow">
      <img src="../assets/loading.gif" width="180px" height="100px" />
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // cartList: [], //商品
      srotLsit: [], //左边排序区域
      shanxuanList: [], //筛选
      ISshow: false,
      i: 2
    };
  },
  computed: {
    // 全部商品
    cartList() {
      return this.$store.state.cartList;
    },
    cartListtems() {
      return this.$store.state.cartListtems;
    }
  },
  mounted() {
    this.$store.dispatch("CARTLISTITEMS");
    axios
      .get("./data.json")
      .then(res => {
        console.log(res.data.result.list);
        // this.cartList = res.data.result.list;
        this.shanxuanList = res.data.result.list;
        this.srotLsit = res.data.result.slider;
        console.log(res.data.result.slider);
      })
      .catch(err => {
        console.log(err);
      });
    window.addEventListener("scroll", () => {
      //获取文档的高度
      var docHeight = document.documentElement.scrollHeight;

      //获取当前窗口的高度（可视区域）
      var client = document.documentElement.clientHeight;

      //获取滚动的距离
      var scrollOffset = document.documentElement.scrollTop;
      window.console.log(docHeight - client - scrollOffset);

      if (docHeight - client - scrollOffset < 0.61) {
        window.console.log("底部.......");
        this.ISshow = true;
        //执行异步请求
        window.setTimeout(() => {
          if (this.i === 4) {
            this.ISshow = false;
            return;
          }
          this.ISshow = false;
          axios
            .get(`./data${this.i}.json`)
            .then(res => {
              //扩展运算符 赋值给list
              this.shanxuanList = [
                ...this.shanxuanList,
                ...res.data.result.list
              ];
            })
            .catch(err => {
              console.log(err);
            });
          this.i++;
        }, 3000);
      }
    });
  },
  directives: {
    vanish: {
      //操作dom  binding对象
      inserted(el, binding) {
        // console.log(el, binding);
        if (binding.value == true) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      },
      update(el, binding) {
        if (binding.value) {
          el.style.visibility = "visible";
        } else {
          el.style.visibility = "hidden";
        }
      }
    }
  },
  methods: {
    sortpaixu(index) {
      console.log(index);
      switch (index) {
        case 0:
          this.shanxuanList = this.cartList;
          break;
        case 1:
          this.shanxuanList = [];
          this.cartList.forEach(ele => {
            if (ele.salePrice >= 0 && ele.salePrice <= 100) {
              this.shanxuanList.push(ele);
            }
          });
          break;
        case 2:
          this.shanxuanList = [];
          this.cartList.forEach(ele => {
            if (ele.salePrice >= 100 && ele.salePrice <= 500) {
              this.shanxuanList.push(ele);
            }
          });
          break;
        case 3:
          this.shanxuanList = [];
          this.cartList.forEach(ele => {
            if (ele.salePrice >= 500 && ele.salePrice <= 1000) {
              this.shanxuanList.push(ele);
            }
          });
          break;
        case 4:
          this.shanxuanList = [];
          this.cartList.forEach(ele => {
            if (ele.salePrice >= 1000 && ele.salePrice <= 2000) {
              this.shanxuanList.push(ele);
            }
          });
          break;
      }
    },
    // 点击加入购物车
    gotoCart(item) {
      this.$dialog.confirm({
        title: "是否加入购物车",
      })
        .then(() => {
           this.$store.dispatch("PUSHCARTITEM", item);
        })
        .catch(() => {
        });
      // console.log(item);
    },
    sort_item() {
      this.shanxuanList.sort((a, b) => {
        return b.salePrice - a.salePrice;
      });
    },
    // 到购物车页面
    goshopping() {
      this.$router.push({
        path: "/cart"
      });
    }
  }
};
</script>
<style  scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: left;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}
.about_item_img {
  width: 100%;
}
.about_item_img > img {
  width: 100%;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}
/deep/ .el-main {
  padding: 0;
}
body > .el-container {
  margin-bottom: 40px;
}
.about_item {
  margin: 3px;
  border: 1px solid rgba(203, 216, 203, 0.867);
  /* height: 260px; */
  /* border-radius: 10%; */
  margin-bottom: 5px;
}

.el-dropdown {
  display: none;
}
.about_item_content p {
  text-align: left;
}
.about_item_content > p:nth-child(2) {
  color: red;
}
.cartList_box_title {
  font-size: 14px;
  line-height: 30px;
}
.gotoshop {
  color: red;
  border: 2px solid red;
  margin: 8px;
  height: 33px;
  line-height: 33px;
}
/deep/ .el-menu-vertical-demo {
  text-align: left;
}
/* /deep/ .el-menu-item.is-active{
  border-left: 1px solid red;
} */
@media screen and (max-width: 768px) {
  .about_item {
    height: 110px;
    width: 100%;
    /* background: rgb(78, 78, 116); */
  }
  /deep/ .el-menu-vertical-demo {
    display: none;
  }
  .el-aside {
    display: none;
  }
  .el-dropdown {
    display: block;
  }
  .about_item_img {
    width: 90px;
    height: 90px;
    border: 1px solid rgba(203, 216, 203, 0.867);
    margin: 5px;
  }
  .about_item_img img {
    width: 100%;
  }
  .about_item {
    display: flex;
  }
  .gotoshop {
    position: absolute;
    right: 0;
    font-size: 14px;
  }
  .cartList_box_title {
    margin-top: 10px;
  }
}
.icon_item_box {
  display: flex;
  position: absolute;
  top: 78px;
  right: 8%;
}
.icon_item_box > div {
  font-size: 24px;
  width: 100px;
  height: 60px;
  /* border: 1px solid red; */
  text-align: center;
}
.icon_item_box > div span {
  font-size: 12px;
  text-align: center;
}
.icon_min {
  color: red;
}
.footer_loading {
  width: 100%;
  height: 100px;
  /* background: darkcyan; */
}
</style>